{#key}

Posted on 2023-02-09 by

henrikvilhelmberglund

Sometimes we may want to recreate elements or components when something has changed .

Imagine that you wanted to clear the input field whenever you clicked the button.
<script>
	let count = 0;
</script>

<input type="text" />

<button on:click={() => count++}>{count}</button>
Here we have a chat app where we can select a friend and see their messages. But, when clicking, the component using the friend prop doesn't update.
Talking to charlie
Loading ...
<script>
	import Chat from "./Chat.svelte";

	let friends = [
		{ name: "alfred" },
		{ name: "ben" },
		{ name: "charlie" },
		{ name: "dawson" },
		{ name: "elain" },
	];
	let selectedFriend = friends[2];
</script>

<div class="containy">
	<ul class="list">
		{#each friends as friend}
			<li>
				<label class:selected={selectedFriend === friend}>
					<input bind:group={selectedFriend} type="radio" value={friend} />
					{friend.name}
				</label>
			</li>
		{/each}
	</ul>
	<div class="chat">
		<Chat friend={selectedFriend} />
	</div>
</div>

<style>
	:global(body) {
		padding: 0;
	}
	.containy {
		display: grid;
		grid-template-columns: 100px 1fr;
		height: 100%;
	}
	.list {
		padding: 0;
		margin: 0;
		border-right: 1px solid #999;
	}
	li {
		list-style: none;
		border-bottom: 1px solid #999;
	}
	label {
		display: block;
		padding: 10px 5px;
	}
	.selected {
		background: lightskyblue;
	}
	input {
		visibility: hidden;
		width: 0;
	}
</style>

Chat.svelte

<script>
	import { fetchChat } from "./data";

	export let friend;
	let name = friend.name;
	let message = "";

	let chats = [];
	let loading = false;

	loadChat(name);

	async function loadChat(name) {
		loading = true;
		chats = await fetchChat(name);
		loading = false;
	}
</script>

<div class="container">
	<div class="content">
		<div>Talking to {name}</div>

		{#if loading}
			Loading ...
		{:else}
			<ul>
				{#each chats as chat}
					<li>{chat}</li>
				{/each}
			</ul>
		{/if}
	</div>
	<input bind:value={message} />
</div>

<style>
	.container {
		height: 100%;
		display: flex;
		flex-direction: column;
	}
	.content {
		flex: 1;
		padding: 10px;
	}
</style>

In this case, rather than creating a reset function that resets the whole state we could simply use the key block to destroy the component and reinitialize a new one .